<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	session.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="${basePath }">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>西普茗茶商品-订单详情</title>
<meta name="renderer" content="webkit">

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://cdn.bootcss.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="assets/css/themes/light.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages/blog.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
	var isHTML5 = true;
</script>
<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<script src="js/excanvas.min.js"></script> 
    <script type="text/javascript">
		isHTML5 = false;
	</script>
<![endif]-->

<style type="text/css">
body {
	background: #fef9f3 !important;
}
</style>
</head>
<!--/head-->
<!-- BEGIN BODY -->
<body class="page-footer-fixed">
	<div class="clearfix "></div>
	<!-- BEGIN CONTAINER -->
	<div class="page-container">

		<!-- BEGIN CONTENT -->
		<div class="page-content-wrapper">
			<div class="page-content no-space" style="border-bottom: none !important; margin-bottom: 50px !important;">
				<div class="container padding-top-10 padding-bottom-10 bg-white" style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
					<div class="blog-page no-space">
						<div class="container">
							<c:choose>
								<c:when test="${complexOrder.order.orderStatus=='交易完成'||complexOrder.order.orderStatus=='待评价' }">
									<div class="row">
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 1.提交订单
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 2.配送中
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 3.签收成功
										</div>
									</div>
								</c:when>
								<c:when test="${complexOrder.order.orderStatus=='交易取消' }">
								</c:when>
								<c:when test="${complexOrder.order.orderStatus=='待付款'||complexOrder.order.orderStatus=='待发货' }">
									<div class="row">
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 1.提交订单
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle"></i> 2.配送中
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle"></i> 3.签收成功
										</div>
									</div>
								</c:when>
								<c:when test="${complexOrder.order.orderStatus=='待收货' }">
									<div class="row">
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 1.提交订单
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle text-blue"></i> 2.配送中
										</div>
										<div class="col-xs-4 text-center">
											<i class="fa fa-check-circle"></i> 3.签收成功
										</div>
									</div>
								</c:when>
							</c:choose>
						</div>
					</div>
				</div>
				<div class="container margin-top-10 padding-top-10 padding-bottom-10 bg-white" style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
					<div class="blog-page no-space">
						<div class="container">
							<h4>
								<c:choose>
									<c:when test="${complexOrder.order.orderStatus=='交易完成' }">
										<strong>订单已经完成。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='交易取消' }">
										<strong>订单已经取消。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待付款' }">
										<strong>提交订单成功，等待付款。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待发货' }">
										<strong>订单付款成功，等待发货。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待收货' }">
										<strong>订单已经发货，等待收货。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待评价' }">
										<strong>订单已经收货，等待评价。</strong>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='退换货中' }">
										<strong>买家申请了退换货，订单正在退换货中。</strong>
									</c:when>

								</c:choose>
							</h4>
							<p>
								订单状态：
								<c:choose>
									<c:when test="${complexOrder.order.orderStatus=='交易完成' }">
										<span class="label label-success">交易完成</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='交易取消' }">
										<span class="label label-warning">交易取消</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待付款' }">
										<span class="label label-danger">待付款</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待发货' }">
										<span class="label label-primary">待发货</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待收货' }">
										<span class="label label-primary">待收货</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待评价' }">
										<span class="label label-default">待评价</span>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='退换货中' }">
										<span class="label label-danger">退换货中</span>
									</c:when>
								</c:choose>
							</p>
							<p>订单编号：${complexOrder.order.orderId }</p>
							<!-- <p>支付交易号：2015072011549632525452282</p> -->
							<p>
								创建时间：
								<fmt:formatDate value="${complexOrder.order.orderBuyTime }" pattern="yyyy-MM-dd HH:mm:ss" />
							</p>
							<!-- <p>付款时间：2015-07-20 20:35:22</p>
							<p>发货时间：2015-07-20 21:35:22</p>
							<p>成交时间：2015-07-21 08:11:52</p> -->
							<br>
							<div>
								<c:choose>
									<c:when test="${complexOrder.order.orderStatus=='交易完成' }">
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='交易取消' }">
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待付款' }">
										<button type="button" class="btn btn-lg red btn-block pay_right_now border-radius-5" data-order-id="${complexOrder.order.orderId }">立即付款</button>
										<button type="button" class="btn btn-lg blue btn-block cancel_order_button border-radius-5" data-order-id="${complexOrder.order.orderId }" data-div="#div_${complexOrder.order.orderId }">取消订单</button>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待发货' }">
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待收货' }">
										<button type="button" class="btn btn-lg blue btn-block confirm_receive_order_button border-radius-5" data-order-id="${complexOrder.order.orderId }" data-div="#div_${complexOrder.order.orderId }">确认收货</button>
									</c:when>
									<c:when test="${complexOrder.order.orderStatus=='待评价' }">
										<a href="post_comment?id=${complexOrder.order.orderId }" class="btn btn-lg blue btn-block border-radius-5" data-order-id="${complexOrder.order.orderId }" data-div="#div_${complexOrder.order.orderId }">立即评价</a>
									</c:when>
								</c:choose>
							</div>
						</div>
					</div>
				</div>

				<div class="container margin-top-10 padding-top-10 padding-bottom-10 bg-white" style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
					<div class="blog-page no-space">
						<div class="container">
							<p>
								总额：<span class="text-red"><strong><i class="fa fa-rmb"></i> <fmt:formatNumber value="${complexOrder.order.orderTotalPrice }" type="currency" pattern="#,##0.##" /></strong></span>
								<c:if test="${complexOrder.order.orderFreight>0 }">（已包含邮费 <fmt:formatNumber value="${complexOrder.order.orderFreight }" type="currency" pattern="#,##0.##" /> 元）</c:if>
								<c:if test="${complexOrder.order.orderFreight<=0 }">（卖家包邮）</c:if>
								</span>
							</p>
							<p>收货地址：${complexOrder.order.orderBuyerAddress }</p>
							<p>收货人：${complexOrder.order.orderBuyerName } ${complexOrder.order.orderBuyerPhone }</p>
							<c:if test="${complexOrder.order.orderSendWay!=null&&complexOrder.order.orderSendWay!=''}">
								<p>派送时间：${complexOrder.order.orderSendWay }</p>
							</c:if>
						</div>
					</div>
					<div class="blog-page no-space">
						<div class="clearfix"></div>
						<c:set var="one_order_goods_count" value="0"></c:set>
						<c:forEach items="${complexOrder.goodsHistoryItemList}" var="goodsHistoryItem" varStatus="giStat">
							<hr style="margin-top: 5px !important; margin-bottom: 5px !important;">
							<div class="container" data-order-id="${complexOrder.order.orderId }">
								<div class="row">
									<div class="col-xs-12">
										<div class="media padding-top-5">
											<a href="item/${goodsHistoryItem.goodsHistory.goodsId }" class="pull-left">
												<img alt="" src="${goodsHistoryItem.goodsHistory.goodsMainPic }" class="media-object">
											</a>
											<div class="media-body">
												<h5 class="media-heading">
													<span>${goodsHistoryItem.goodsHistory.goodsName }</span>
												</h5>
												<p class="margin-top-5">
													<span class="text-light">价格：</span><span class="text-red"><strong><i class="fa fa-rmb"></i> <fmt:formatNumber value="${goodsHistoryItem.goodsHistory.goodsPrice }" type="currency"
																pattern="#,##0.##" /></strong></span>
												</p>
												<p>
													<span class="text-light">数量：</span><span class="text-red"><strong>${goodsHistoryItem.number }</strong></span>
												</p>
												<div class="clearfix"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<c:set var="one_order_goods_count" value="${one_order_goods_count+goodsHistoryItem.number }"></c:set>
						</c:forEach>
					</div>
					<hr style="margin-top: 5px !important; margin-bottom: 5px !important;">
					<h5 class="text-right">
						<span>共${one_order_goods_count }件商品，合计：<span class="text-red"><strong><i class="fa fa-rmb"></i> <fmt:formatNumber value="${complexOrder.order.orderTotalPrice }" type="currency"
										pattern="#,##0.##" /></strong></span></span>
					</h5>
				</div>
				<c:if test="${complexOrder.order.orderStatus=='待收货' }">
					<div class="container margin-top-10 padding-top-10 padding-bottom-10 bg-white" style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;">
						<div class="blog-page no-space">
							<div class="container margin-bottom-10">
								<p>
									快递公司：<span class="text-red">${complexOrder.order.orderExpressCompany }</span>
								</p>
								<p>
									快递单号：<span class="text-red">${complexOrder.order.orderExpressNumber }</span>
								</p>
								<br>
								<button data-type="${complexOrder.order.orderExpressCompany }" data-postid="${complexOrder.order.orderExpressNumber }" class="btn default btn-block see_express_detail_button border-radius-5">查看物流</button>
							</div>
						</div>
					</div>
					<br>
					<!-- <div class="well well-sm margin-bottom-10">
						<div class="blog-page no-space">
							<div class="container margin-bottom-10">
								<div class="row text-blue margin-top-10">
									<div class="col-xs-2 text-center">
										<i class="fa fa-check-circle"></i>
									</div>
									<div class="col-xs-10 text-left">【8月13日12:58】快件已到达广州市天河区华工配送点，配送员正在上门配送中。</div>
								</div>
								<div class="row text-light margin-top-10">
									<div class="col-xs-2 text-center">
										<i class="fa fa-check-circle"></i>
									</div>
									<div class="col-xs-10 text-left">【8月13日06:58】快件已到达广州从化集散中心。</div>
								</div>
								<div class="row text-light margin-top-10">
									<div class="col-xs-2 text-center">
										<i class="fa fa-check-circle"></i>
									</div>
									<div class="col-xs-10 text-left">【8月12日23:58】快件已到达上海浦东集散中心，即将发往广州从化集散中心。</div>
								</div>
								<div class="row text-light margin-top-10">
									<div class="col-xs-2 text-center">
										<i class="fa fa-check-circle"></i>
									</div>
									<div class="col-xs-10 text-left">【8月12日12:58】已揽件。</div>
								</div>
							</div>
						</div>
					</div> -->
				</c:if>

			</div>
			<!-- END CONTAINER -->
		</div>
	</div>

	<!-- BEGIN FOOTER -->
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="col-xs-3 text-center">
					<a href="./" class="icon-btn">
						<!-- <i class="fa fa-home text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-logo">&#xe626;</i>
						<div class="text-gold margin-top-2">首页</div>

					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="goods_type/get_shop_goods_type" class="icon-btn">
						<!-- <i class="fa fa-list-ul text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold con-qh-all-goods">&#xe622;</i>
						<div class="text-gold margin-top-2">类型</div>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="cart" class="icon-btn">
						<!-- <i class="fa fa-shopping-cart text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-cart">&#xe61b;</i>
						<div class="text-gold margin-top-2">购物车</div>

						<span class="badge badge-important" id="shooping_cart_icon_number"></span>
					</a>
				</div>
				<div class="col-xs-3 text-center">
					<a href="item/infocenter.jsp" class="icon-btn">
						<!-- <i class="fa fa-user text-gold"></i> -->
						<i style="font-size: 22px;" class="iconfont text-gold icon-qh-infocenter">&#xe61d;</i>
						<div class="text-gold margin-top-2">个人中心</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery-migrate/1.2.1/jquery-migrate.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="js/app.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script>
		$(function()
		{
			App.init();

			$(".pay_right_now").each(function()
			{
				$(this).click(function()
				{
					window.location.href = "pay?ids=" + $(this).attr("data-order-id");
				});
			});
			$(".cancel_order_button").each(function()
			{
				$(this).click(function()
				{
					if (confirm("确认取消此订单吗?") == false)
					{
						return false;
					}
					var ids = "";
					ids = $(this).attr("data-order-id");
					var obj = $(this);

					obj.attr("disabled", "disabled");
					$.post("u_cancel_order_do",
					{
						"commonStr" : ids
					}, function(json)
					{
						if (json.success == false)
						{
							alert(json.info);
							obj.removeAttr("disabled");
						}
						else
						{
							obj.removeAttr("disabled");
							$(obj.attr("data-div")).remove();
						}
					},
					//返回类型
					"json");
				});
			});

			//确认收货
			$(".confirm_receive_order_button").each(function()
			{
				$(this).click(function()
				{
					if (confirm("确认已经收到货了吗?") == false)
					{
						return false;
					}
					var ids = "";
					ids = $(this).attr("data-order-id");
					var obj = $(this);

					obj.attr("disabled", "disabled");
					$.post("u_confirm_receive_order_do",
					{
						"commonStr" : ids
					}, function(json)
					{
						if (json.success == false)
						{
							alert(json.info);
							obj.removeAttr("disabled");
						}
						else
						{
							alert("如需对商品进行退换货，请在商品评价前与客服沟通，谢谢。");
							obj.removeAttr("disabled");
							$(obj.attr("data-div")).remove();
							window.location.reload(true);
						}
					},
					//返回类型
					"json");
				});
			});

			//查看快递信息
			$(".see_express_detail_button").each(function()
			{
				var obj = $(this);
				obj.click(function()
				{
					var the_href = "http://m.kuaidi100.com/index_all.html?type=EXPRESS_NAME&postid=EXPRESS_NUMBER&callbackurl=REDIRECT_URI";
					the_href = the_href.replace("EXPRESS_NAME", obj.attr("data-type"));
					the_href = the_href.replace("EXPRESS_NUMBER", obj.attr("data-postid"));
					the_href = the_href.replace("REDIRECT_URI", location.href.split('#')[0]);
					window.location.href = the_href;
				});
			});

		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
</html>